﻿@{
    ViewBag.Title = "Resetpassword";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section head{
    <link rel="stylesheet" href="/content/css/pages/page_reg.css" />
}
<div class="breadcrumbs margin-bottom-40">
    <div class="container">
        <h3 class="pull-left blue">
            找回密码</h3>
    </div>
</div>
<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div class="tab-v1">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#emailtype" data-toggle="tab" style="padding: 10px 20px;">
                        <i class="icon-envelope"></i>注册邮件方式找回</a></li>
                    <li class="">
                        <a href="#mobiletype" data-toggle="tab" style=" padding: 10px 20px;">
                        <i class="icon-mobile-phone icon-large"></i>手机方式找回</a></li>
                </ul>
                <div class="tab-content" style="padding-top: 0;">
                    <div class="reg-page tab-pane active" style="padding: 5px 10px;" id="emailtype">
                        <form id="emailrpform" action="/account/resetpassword" method="post">
                        <input type="hidden" name="token" />
                        <input type="hidden" name="type" value="0" />
                        @if (!String.IsNullOrEmpty(ViewBag.Message))
                        {
                            <div class="alert alert-error">
                                @ViewBag.Message
                            </div>
                        }
                        <div class="row-fluid">
                            <div class="control-group">
                                <label class="control-label">
                                    用户名(邮箱) <span class="color-red">*</span>：</label>
                                <div class="controls">
                                    <input class="span12 {required:true,email:true,remote:{url:'/account/hasusername',messages:'该用户名不存在，请查证'}}"
                                        id="txtusername1" name="username" type="text" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    验证码 <span class="color-red">*</span>：</label>
                                <div class="controls">
                                    <input type="text" name="validationCode" class="form-control {required:true,length:4}" />
                                    <div id="codeimg" style="margin-left: 10px; display: inline;">
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <button type="submit" class="btn btn-primary span12" style="margin-left: 0">
                                确认</button>
                        </div>
                        </form>
                    </div>
                    <div class="reg-page tab-pane" style="padding: 5px 10px;" id="mobiletype">
                        <form id="mctform" action="/account/mobileCodeTypeResetPassword" method="post">
                        <input type="hidden" name="u" id="hidu" />
                        <div class="row-fluid">
                            <div class="control-group">
                                <label class="control-label">
                                    用户名(邮箱) <span class="color-red">*</span>：</label>
                                <div class="controls">
                                    <input class="span12" id="mb_username" name="username" type="text" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    手机号码</label>
                                <div class="controls">
                                    <input class="span12" id="txtmobile" name="mobile" type="text" />
                                </div>
                            </div>
                            <div class="specialMessage hide alert alert-danger" style="margin-bottom: 5px;">
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    手机验证码</label>
                                <div class="controls input-append">
                                    <input class="input-small" id="txtMobileCode" name="MobileCode" type="text" />
                                    <input type="button" name="btnmobilecode" class="btn" onclick="getMobileCode(this)"
                                        value="获取验证码" />
                                </div>
                            </div>
                            <div id="newpwdbox" style="display:none;">
                            <div class="control-group">
                                <label class="control-label">
                                    重置密码</label>
                                <div class="controls">
                                    <input class="span12" id="txtloginpwd" name="password" type="password" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                    确认密码</label>
                                <div class="controls">
                                    <input class="span12" id="txtloginconfirm" name="confirm" type="password" />
                                </div>
                            </div>
                            </div>
                            <hr />
                            <button type="button" id="btnmbl" disabled="disabled" class="btn btn-primary span12" style="margin-left: 0">
                                确认</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.metadata.js"></script>
    <script type="text/javascript" src="/content/scripts/plug.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        var time = 60;
        var interval = null;
        $(function () {
            validation.BindValidator();
            $('#emailrpform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
        function getMobileCode(sender) {
            var username = $('#mb_username').val();
            var mobile = $('#txtmobile').val();
            if (username.length > 0 && /^1\d{10}$/.test(mobile)) {
                $.ajax({
                    url: '/account/getmobilecode',
                    data: {
                        username: username,
                        mobile: mobile
                    },
                    beforeSend: function () {
                        $('#alt-error').remove();
                        $(sender).attr('disabled', 'disabled');
                    },
                    success: function (result) {
                        if (result == '1') {
                            interval = window.setInterval(function () {
                                if (time > 0) {
                                    $(sender).val(time-- + ' 秒后重新获取');
                                } else {
                                    window.clearInterval(interval);
                                    time = 60;
                                    $(sender).removeAttr('disabled').val('获取验证码');
                                }
                            }, 1000);
                            $('#btnmbl').removeAttr('disabled').click(function () {
                                checkMobileCode(this);
                            });
                        } else if (result == '2') {
                            $('<div id="alt-error" class="alert alter-error">您输入的用户名与手机号不匹配，请重新输入</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
                            $(sender).removeAttr('disabled').val('获取验证码');
                        } else {
                            $('<div id="alt-error" class="alert alter-error">对不起，您输入用户不存在或未完成手机号认证</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
                            $(sender).removeAttr('disabled').val('获取验证码');
                        }
                    }
                });
            } else {
                $('#alt-error').remove();
                $('<div id="alt-error" class="alert alter-error">用户名或手机号输入有误，请重新输入</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
            }
        }
        function checkMobileCode(sender) {
            var username = $('#mb_username').val();
            var mobile = $('#txtmobile').val();
            var mobileCode = $('#txtMobileCode').val();
            if (/^\d{6}$/.test(mobileCode)) {
                $.ajax({
                    url: '/account/checkmobilecode',
                    data: {
                        username: username,
                        mobile: mobile,
                        mobileCode: mobileCode
                    },
                    beforeSend: function () {
                        $('#alt-error').remove();
                    },
                    success: function (result) {
                        if (result == '0') {
                            $('<div id="alt-error" class="alert alter-error">验证码输入有误</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
                        } else {
                            $('#hidu').val(result);
                            $('#mb_username').attr('disabled', 'disabled');
                            $('#txtmobile').attr('disabled', 'disabled');
                            $('#alt-error').remove();
                            $('#newpwdbox').show();
                            $(sender).click(function () {
                                var pwd = $('#txtloginpwd').val();
                                var confirm = $('#txtloginconfirm').val();
                                if (pwd.length < 6 || pwd.length > 18) {
                                    $('<div id="alt-error" class="alert alter-error">密码长度6-18位</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
                                } else if (pwd != confirm) {
                                    $('<div id="alt-error" class="alert alter-error">两次密码输入不一致</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
                                }
                                else {
                                    $('#mctform').submit();
                                }
                            });
                        }
                    }
                });
            }
            else {
                $('#alt-error').remove();
                $('<div id="alt-error" class="alert alter-error">手机验证码输入有误，请输入6位数字</div>').insertBefore($('#mobiletype').children('form').children('div:eq(0)'));
            }
        }
    </script>
}
